<template>
  <div class="code">
    <g-banner title="数据可视化代码" des="基于datav的布局和图标组件实现"></g-banner>
    <div class="g-box" v-for="(item, index) in code" :key="index">
      <h2 class="g-form-title">{{ item.fileName }}</h2>
      <codemirror v-model="item.code" :options="getOption(item.type)"></codemirror>
    </div>
  </div>
</template>
<script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/mode/shell/shell.js'
import 'codemirror/mode/vue/vue.js'
import 'codemirror/theme/eclipse.css'
import { code } from '@/data/datav-code'
export default {
  data() {
    return {
      code,
      cmOptions: {
        tabSize: 2,
        mode: null,
        theme: 'eclipse',
        lineNumbers: true,
        minHeight: 0,
        line: true,
        readOnly: 'nocursor'
      },
    }
  },
  components: {
    codemirror
  },
  methods: {
    getOption(type) {
      let options = { ...this.cmOptions }
      options.mode = type
      return options
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .CodeMirror {
  font-family: 'Courier New', '黑体';
  line-height: 20px;
  height: auto;
}
</style>